<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Foo</title>
  <link href="http://example.com/foo" rel="canonical">
<style>
:target {
	background: lime;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1>Foo</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Living Standard, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="http://example.com/foo">http://example.com/foo</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Example Editor</span>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright">COPYRIGHT GOES HERE </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Testing the various textual links.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#test"><span class="secno">1</span> <span class="content">Test</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
     </ol>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="test"><span class="secno">1. </span><span class="content">Test</span><a class="self-link" href="#test"></a></h2>
   <p>Setting up the definitions:</p>
   <p><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-property">property</dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-for="@at-rule" data-dfn-type="descriptor" data-export id="descdef-at-rule-descriptor">descriptor</dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-type="at-rule" data-export id="at-ruledef-at-rule">@at-rule</dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-type">&lt;type></dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="function()" id="funcdef-function">function(foo)</dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-for="property" data-dfn-type="value" data-export data-lt="value" id="property-value">value for property</dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-for="@at-rule/descriptor" data-dfn-type="value" data-export data-lt="value" id="descriptor-value">value for descriptor</dfn>,</p>
   <p><dfn class="css" data-dfn-for="@at-rule" data-dfn-type="value" data-export data-lt="value" id="at-rule-value">value for @at-rule<a class="self-link" href="#at-rule-value"></a></dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-for="<type>" data-dfn-type="value" data-export data-lt="value" id="type-value">value for &lt;type></dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-for="property" data-dfn-type="value" data-export data-lt="property" id="valdef-property-property">value named "property"</dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-for="property" data-dfn-type="value" data-export id="valdef-property-different-value">different-value</dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-for="property" data-dfn-type="value" data-export id="valdef-property-bang">!bang</dfn>,</p>
   <p><dfn class="dfn-paneled css" data-dfn-for="property" data-dfn-type="value" data-export id="valdef-property-double-bang">!!double-bang</dfn>,</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="interface"><code>Interface</code></dfn>,</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="Interface" data-dfn-type="attribute" data-export id="dom-interface-attribute"><code>attribute</code></dfn>,</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="Interface" data-dfn-type="method" data-export id="dom-interface-method"><code>method()</code></dfn>,</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-dictionary"><code>Dictionary</code></dfn>,</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="Interface" data-dfn-type="attribute" data-export data-lt="ambiguous-attr" id="interface-attr"><code>attribute for Interface</code></dfn>,</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="Dictionary" data-dfn-type="dict-member" data-export data-lt="ambiguous-attr" id="dict-attr"><code>attribute for Dictionary</code></dfn></p>
   <p><dfn class="dfn-paneled" data-dfn-type="element" data-export id="elementdef-element"><code>element</code></dfn></p>
   <p><dfn class="dfn-paneled" data-dfn-for="element" data-dfn-type="element-attr" data-export id="element-attrdef-element-attribute"><code>attribute</code></dfn></p>
   <p><dfn class="dfn-paneled" data-dfn-type="element" data-export id="elementdef-elements-can-have-dashes-too"><code>elements-can-have-dashes-too</code></dfn></p>
   <p><dfn class="dfn-paneled" data-dfn-for="element" data-dfn-type="element-attr" data-export id="element-attrdef-element-attribute-with-dashes-because-attributes-can-have-dashes"><code>attribute-with-dashes-because-attributes-can-have-dashes</code></dfn></p>
   <p><dfn class="dfn-paneled" data-dfn-for="element/attribute" data-dfn-type="attr-value" data-export id="attr-valuedef-element-attribute-value"><code>value</code></dfn></p>
   <p><dfn class="dfn-paneled" data-dfn-for="element/attribute" data-dfn-type="attr-value" data-export id="attr-valuedef-element-attribute-val-with-spaces"><code>val with spaces</code></dfn></p>
   <p><dfn class="dfn-paneled" data-dfn-for="elements-can-have-dashes-too/attribute-with-dashes-because-attributes-can-have-dashes" data-dfn-type="attr-value" data-export id="attr-valuedef-elements-can-have-dashes-too-attribute-with-dashes-because-attributes-can-have-dashes-another-value"><code>another value</code></dfn></p>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="dfn">dfn</dfn></p>
   <p><dfn class="dfn-paneled" data-dfn-type="abstract-op" data-export id="abstract-opdef-abstractop">AbstractOp</dfn></p>
   <p>Linking:</p>
   <p><a class="property" data-link-type="propdesc" href="#propdef-property" id="ref-for-propdef-property">property</a></p>
   <p><a class="property" data-link-type="propdesc" href="#propdef-property" id="ref-for-propdef-property①">property</a></p>
   <p><a class="property css" data-link-type="property" href="#propdef-property" id="ref-for-propdef-property②">property</a></p>
   <p><a class="css" data-link-type="propdesc" href="#propdef-property" id="ref-for-propdef-property③">property: foo</a></p>
   <p><a class="property" data-link-type="propdesc" href="#descdef-at-rule-descriptor" id="ref-for-descdef-at-rule-descriptor">descriptor</a></p>
   <p><a class="property" data-link-type="propdesc" href="#descdef-at-rule-descriptor" id="ref-for-descdef-at-rule-descriptor①">descriptor</a></p>
   <p><a class="css" data-link-type="maybe" href="#at-ruledef-at-rule" id="ref-for-at-ruledef-at-rule">@at-rule</a></p>
   <p><a class="production css" data-link-type="type" href="#typedef-type" id="ref-for-typedef-type" title="Expands to: value">&lt;type></a></p>
   <p><a class="production" data-link-type="propdesc" href="#propdef-property" id="ref-for-propdef-property④">&lt;'property'></a></p>
   <p><a class="production" data-link-type="propdesc" href="#descdef-at-rule-descriptor" id="ref-for-descdef-at-rule-descriptor②">&lt;'descriptor'></a></p>
   <p><a class="production css" data-link-type="at-rule" href="#at-ruledef-at-rule" id="ref-for-at-ruledef-at-rule①">&lt;@at-rule></a></p>
   <p><a class="production" data-link-type="propdesc" href="#descdef-at-rule-descriptor" id="ref-for-descdef-at-rule-descriptor③">&lt;'descriptor'></a></p>
   <p><a class="production css" data-link-type="function" href="#funcdef-function" id="ref-for-funcdef-function">&lt;function()></a></p>
   <p><a class="css" data-link-type="maybe" href="#property-value" id="ref-for-property-value">value</a></p>
   <p><a class="css" data-link-type="maybe" href="#descriptor-value" id="ref-for-descriptor-value">value</a></p>
   <p><a class="css" data-link-type="value" href="#valdef-property-property" id="ref-for-valdef-property-property">property</a></p>
   <p><a class="css" data-link-type="maybe" href="#descriptor-value" id="ref-for-descriptor-value①">value</a></p>
   <p><a class="css" data-link-type="maybe" href="#type-value" id="ref-for-type-value">value</a></p>
   <p><a class="css" data-link-type="maybe" href="#valdef-property-different-value" id="ref-for-valdef-property-different-value">different-value</a></p>
   <p><a class="css" data-link-type="maybe" href="#valdef-property-bang" id="ref-for-valdef-property-bang">!bang</a></p>
   <p><span class="css">!!double-bang</span></p>
   <p><a class="css" data-link-type="value" href="#valdef-property-double-bang" id="ref-for-valdef-property-double-bang">!!double-bang</a></p>
   <p><a class="css" data-link-type="at-rule" href="#at-ruledef-at-rule" id="ref-for-at-ruledef-at-rule②">@at-rule</a></p>
   <p><a class="css" data-link-type="type" href="#typedef-type" id="ref-for-typedef-type①" title="Expands to: value">&lt;type></a></p>
   <p><a data-link-type="functionish" href="#funcdef-function" id="ref-for-funcdef-function①">function()</a></p>
   <p><a class="css" data-link-type="maybe" href="#funcdef-function" id="ref-for-funcdef-function②">function()</a></p>
   <p><code class="idl"><a data-link-type="idl" href="#interface" id="ref-for-interface">Interface</a></code></p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-interface-attribute" id="ref-for-dom-interface-attribute">attribute</a></code></p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-interface-attribute" id="ref-for-dom-interface-attribute①">attribute</a></code></p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-interface-method" id="ref-for-dom-interface-method">method()</a></code></p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-interface-method" id="ref-for-dom-interface-method①">method()</a></code></p>
   <p><code class="idl"><a data-link-type="idl" href="#dictdef-dictionary" id="ref-for-dictdef-dictionary">Dictionary</a></code></p>
   <p><code class="idl"><a data-link-type="idl" href="#interface-attr" id="ref-for-interface-attr">ambiguous-attr</a></code></p>
   <p><code class="idl"><a data-link-type="idl" href="#dict-attr" id="ref-for-dict-attr">ambiguous-attr</a></code></p>
   <p><code class="idl"><a class="idl-code" data-link-type="attribute" href="#interface-attr" id="ref-for-interface-attr①">ambiguous-attr</a></code></p>
   <p><code class="idl"><a class="idl-code" data-link-type="dict-member" href="#dict-attr" id="ref-for-dict-attr①">ambiguous-attr</a></code></p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-interface-attribute" id="ref-for-dom-interface-attribute②">attribute</a></code> <code class="idl"><a data-link-type="idl" href="#dom-interface-attribute" id="ref-for-dom-interface-attribute③">attribute</a></code></p>
   <p><a class="property" data-link-type="propdesc" href="#descdef-at-rule-descriptor" id="ref-for-descdef-at-rule-descriptor④">descriptor</a> <a class="property" data-link-type="propdesc" href="#descdef-at-rule-descriptor" id="ref-for-descdef-at-rule-descriptor⑤">descriptor</a></p>
   <p><a class="css" data-link-type="maybe" href="#property-value" id="ref-for-property-value①">value</a> <a class="css" data-link-type="maybe" href="#property-value" id="ref-for-property-value②">value</a></p>
   <p><code><a data-link-type="element" href="#elementdef-element" id="ref-for-elementdef-element">element</a></code></p>
   <p><code><a data-link-type="element" href="#elementdef-element" id="ref-for-elementdef-element①">&lt;element></a></code></p>
   <p><code><a data-link-type="element-sub" href="#element-attrdef-element-attribute" id="ref-for-element-attrdef-element-attribute">attribute</a></code></p>
   <p><code><a data-link-type="element-sub" href="#element-attrdef-element-attribute" id="ref-for-element-attrdef-element-attribute①">&lt;element attribute=""></a></code></p>
   <p><code><a data-link-type="element-sub" href="#element-attrdef-element-attribute-with-dashes-because-attributes-can-have-dashes" id="ref-for-element-attrdef-element-attribute-with-dashes-because-attributes-can-have-dashes">attribute-with-dashes-because-attributes-can-have-dashes</a></code></p>
   <p><code><a data-link-type="element" href="#elementdef-elements-can-have-dashes-too" id="ref-for-elementdef-elements-can-have-dashes-too">elements-can-have-dashes-too</a></code></p>
   <p><code><a data-link-type="attr-value" href="#attr-valuedef-element-attribute-value" id="ref-for-attr-valuedef-element-attribute-value">value</a></code></p>
   <p><code><a data-link-type="attr-value" href="#attr-valuedef-element-attribute-value" id="ref-for-attr-valuedef-element-attribute-value①">-attr value-</a></code></p>
   <p><code><a data-link-type="attr-value" href="#attr-valuedef-element-attribute-val-with-spaces" id="ref-for-attr-valuedef-element-attribute-val-with-spaces">"val with spaces"</a></code></p>
   <p><code><a data-link-type="attr-value" href="#attr-valuedef-elements-can-have-dashes-too-attribute-with-dashes-because-attributes-can-have-dashes-another-value" id="ref-for-attr-valuedef-elements-can-have-dashes-too-attribute-with-dashes-because-attributes-can-have-dashes-another-value">another value</a></code></p>
   <p><a data-link-type="dfn" href="#dfn" id="ref-for-dfn">dfn</a></p>
   <p><a data-link-type="abstract-op" href="#abstract-opdef-abstractop" id="ref-for-abstract-opdef-abstractop">AbstractOp</a></p>
   <p>Escapes:</p>
   <p>'not-a-property'</p>
   <p>{{NotWebIDL}}</p>
   <p>&lt;{notElement}></p>
   <p>[=not dfn=]</p>
   <p>[$NotAbstract$]</p>
  </main>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#abstract-opdef-abstractop">AbstractOp</a><span>, in §1</span>
   <li>
    ambiguous-attr
    <ul>
     <li><a href="#interface-attr">attribute for Interface</a><span>, in §1</span>
     <li><a href="#dict-attr">dict-member for Dictionary</a><span>, in §1</span>
    </ul>
   <li><a href="#attr-valuedef-elements-can-have-dashes-too-attribute-with-dashes-because-attributes-can-have-dashes-another-value">another value</a><span>, in §1</span>
   <li><a href="#at-ruledef-at-rule">@at-rule</a><span>, in §1</span>
   <li>
    attribute
    <ul>
     <li><a href="#dom-interface-attribute">attribute for Interface</a><span>, in §1</span>
     <li><a href="#element-attrdef-element-attribute">element-attr for element</a><span>, in §1</span>
    </ul>
   <li><a href="#element-attrdef-element-attribute-with-dashes-because-attributes-can-have-dashes">attribute-with-dashes-because-attributes-can-have-dashes</a><span>, in §1</span>
   <li><a href="#valdef-property-bang">!bang</a><span>, in §1</span>
   <li><a href="#descdef-at-rule-descriptor">descriptor</a><span>, in §1</span>
   <li><a href="#dfn">dfn</a><span>, in §1</span>
   <li><a href="#dictdef-dictionary">Dictionary</a><span>, in §1</span>
   <li><a href="#valdef-property-different-value">different-value</a><span>, in §1</span>
   <li><a href="#valdef-property-double-bang">!!double-bang</a><span>, in §1</span>
   <li><a href="#elementdef-element">element</a><span>, in §1</span>
   <li><a href="#elementdef-elements-can-have-dashes-too">elements-can-have-dashes-too</a><span>, in §1</span>
   <li><a href="#funcdef-function">function()</a><span>, in §1</span>
   <li><a href="#interface">Interface</a><span>, in §1</span>
   <li><a href="#dom-interface-method">method()</a><span>, in §1</span>
   <li>
    property
    <ul>
     <li><a href="#propdef-property">(property)</a><span>, in §1</span>
     <li><a href="#valdef-property-property">value for property</a><span>, in §1</span>
    </ul>
   <li><a href="#typedef-type">&lt;type></a><span>, in §1</span>
   <li>
    value
    <ul>
     <li><a href="#attr-valuedef-element-attribute-value">attr-value for element/attribute</a><span>, in §1</span>
     <li><a href="#type-value">value for &lt;type></a><span>, in §1</span>
     <li><a href="#at-rule-value">value for @at-rule</a><span>, in §1</span>
     <li><a href="#descriptor-value">value for @at-rule/descriptor</a><span>, in §1</span>
     <li><a href="#property-value">value for property</a><span>, in §1</span>
    </ul>
   <li><a href="#attr-valuedef-element-attribute-val-with-spaces">val with spaces</a><span>, in §1</span>
  </ul>
  <aside class="dfn-panel" data-for="propdef-property">
   <b><a href="#propdef-property">#propdef-property</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-property">1. Test</a> <a href="#ref-for-propdef-property①">(2)</a> <a href="#ref-for-propdef-property②">(3)</a> <a href="#ref-for-propdef-property③">(4)</a> <a href="#ref-for-propdef-property④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="descdef-at-rule-descriptor">
   <b><a href="#descdef-at-rule-descriptor">#descdef-at-rule-descriptor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-at-rule-descriptor">1. Test</a> <a href="#ref-for-descdef-at-rule-descriptor①">(2)</a> <a href="#ref-for-descdef-at-rule-descriptor②">(3)</a> <a href="#ref-for-descdef-at-rule-descriptor③">(4)</a> <a href="#ref-for-descdef-at-rule-descriptor④">(5)</a> <a href="#ref-for-descdef-at-rule-descriptor⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="at-ruledef-at-rule">
   <b><a href="#at-ruledef-at-rule">#at-ruledef-at-rule</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-ruledef-at-rule">1. Test</a> <a href="#ref-for-at-ruledef-at-rule①">(2)</a> <a href="#ref-for-at-ruledef-at-rule②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-type">
   <b><a href="#typedef-type">#typedef-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-type">1. Test</a> <a href="#ref-for-typedef-type①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-function">
   <b><a href="#funcdef-function">#funcdef-function</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-function">1. Test</a> <a href="#ref-for-funcdef-function①">(2)</a> <a href="#ref-for-funcdef-function②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="property-value">
   <b><a href="#property-value">#property-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-property-value">1. Test</a> <a href="#ref-for-property-value①">(2)</a> <a href="#ref-for-property-value②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="descriptor-value">
   <b><a href="#descriptor-value">#descriptor-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descriptor-value">1. Test</a> <a href="#ref-for-descriptor-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="type-value">
   <b><a href="#type-value">#type-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-type-value">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-property-property">
   <b><a href="#valdef-property-property">#valdef-property-property</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-property-property">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-property-different-value">
   <b><a href="#valdef-property-different-value">#valdef-property-different-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-property-different-value">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-property-bang">
   <b><a href="#valdef-property-bang">#valdef-property-bang</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-property-bang">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-property-double-bang">
   <b><a href="#valdef-property-double-bang">#valdef-property-double-bang</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-property-double-bang">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="interface">
   <b><a href="#interface">#interface</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-interface">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-interface-attribute">
   <b><a href="#dom-interface-attribute">#dom-interface-attribute</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-interface-attribute">1. Test</a> <a href="#ref-for-dom-interface-attribute①">(2)</a> <a href="#ref-for-dom-interface-attribute②">(3)</a> <a href="#ref-for-dom-interface-attribute③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-interface-method">
   <b><a href="#dom-interface-method">#dom-interface-method</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-interface-method">1. Test</a> <a href="#ref-for-dom-interface-method①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-dictionary">
   <b><a href="#dictdef-dictionary">#dictdef-dictionary</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-dictionary">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="interface-attr">
   <b><a href="#interface-attr">#interface-attr</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-interface-attr">1. Test</a> <a href="#ref-for-interface-attr①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dict-attr">
   <b><a href="#dict-attr">#dict-attr</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dict-attr">1. Test</a> <a href="#ref-for-dict-attr①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="elementdef-element">
   <b><a href="#elementdef-element">#elementdef-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-element">1. Test</a> <a href="#ref-for-elementdef-element①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-element-attribute">
   <b><a href="#element-attrdef-element-attribute">#element-attrdef-element-attribute</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-element-attribute">1. Test</a> <a href="#ref-for-element-attrdef-element-attribute①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="elementdef-elements-can-have-dashes-too">
   <b><a href="#elementdef-elements-can-have-dashes-too">#elementdef-elements-can-have-dashes-too</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-elements-can-have-dashes-too">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-element-attribute-with-dashes-because-attributes-can-have-dashes">
   <b><a href="#element-attrdef-element-attribute-with-dashes-because-attributes-can-have-dashes">#element-attrdef-element-attribute-with-dashes-because-attributes-can-have-dashes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-element-attribute-with-dashes-because-attributes-can-have-dashes">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="attr-valuedef-element-attribute-value">
   <b><a href="#attr-valuedef-element-attribute-value">#attr-valuedef-element-attribute-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-valuedef-element-attribute-value">1. Test</a> <a href="#ref-for-attr-valuedef-element-attribute-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="attr-valuedef-element-attribute-val-with-spaces">
   <b><a href="#attr-valuedef-element-attribute-val-with-spaces">#attr-valuedef-element-attribute-val-with-spaces</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-valuedef-element-attribute-val-with-spaces">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="attr-valuedef-elements-can-have-dashes-too-attribute-with-dashes-because-attributes-can-have-dashes-another-value">
   <b><a href="#attr-valuedef-elements-can-have-dashes-too-attribute-with-dashes-because-attributes-can-have-dashes-another-value">#attr-valuedef-elements-can-have-dashes-too-attribute-with-dashes-because-attributes-can-have-dashes-another-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-valuedef-elements-can-have-dashes-too-attribute-with-dashes-because-attributes-can-have-dashes-another-value">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dfn">
   <b><a href="#dfn">#dfn</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn">1. Test</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="abstract-opdef-abstractop">
   <b><a href="#abstract-opdef-abstractop">#abstract-opdef-abstractop</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-abstract-opdef-abstractop">1. Test</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>